<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            width: 500px;
            height: 500px;
            background-color: #ccc;
        }
        ul li {
            width: 50px;
            height: 50px;
            border: 1px solid #000; 
            box-sizing: border-box;
            float: left;
        }

        /* li:nth-of-type(2n) {
            background-color: red;
        }

        li:nth-of-type(2n-1) {
            background-color: blue;
        } */
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script>
        // 要求:
            // 设置li标签中,属于偶数下标的元素.  0 2 4 6 8 10
            // 设置这些偶数系列的li标签背景色为红色
            // 否则,奇数系列的li标签背景色为绿色

            var lis = document.querySelectorAll("li:nth-of-type(odd)");
            var lie = document.querySelectorAll("li:nth-of-type(even)");
            console.log(lis);
            for(i = 0 ;  i < lis.length ; i++) {
                // lis[i].style.backgroundColor = "red";
                lis[i].style["backgroundColor"] = "red";
            }
            for(i = 0 ;  i < lie.length ; i++) {
                lie[i].style.backgroundColor = "blue";
            }
            // lis.style.backgroundColor = "blue";
            var lis_o = document.querySelectorAll("li:nth-of-type(2n-1)");
            // var lis_e = document.querySelector("li:nth-of-type(2n)");
            
            // var lis_o = document.querySelector("li:nth-of-type(2n-1)");
            // lis_o.style["background-color"] = "blue";


    </script>
</body>
</html>